<template>
  <div class="m-box">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="项目专班排名" name="one">
        <div class="pane-body">
          <div class="title-box">
            <img src="~@img/project/icon-paiming.png" alt="" />
            <span>项目专班排名</span>
          </div>
          <div class="chart-box" ref="chartBarZB"></div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="县（市、区）、开发区排名" name="two">
        <div class="pane-body">
          <div class="title-box">
            <img src="~@img/project/icon-paiming.png" alt="" />
            <span>县（市、区）、开发区排名</span>
          </div>
          <table style="margin-top:16px;" class="table1">
            <tr>
              <th width="120">排名</th>
              <th width="240">县（市、区、开发区）</th>
              <th width="320">总分</th>
              <th class="small">计划投资额<br />完成率分</th>
              <th class="small">当年开工率分</th>
              <th class="small">新开工项目计划<br />投资额完成率分</th>
              <th class="small">到位资金率分</th>
              <th class="small">投产项目<br />完成率分</th>
              <th class="small">引进大项目、好项目、 <br />外资项目引进分</th>
              <th class="small">其他事项分</th>
              <th class="small">附加分</th>
            </tr>
            <tr v-for="(item, index) of tableData1" :key="item.id">
              <td class="bold">{{ index + 1 }}</td>
              <td class="bold">{{ item.district_name }}</td>
              <td class="bold">
                <p class="progress-f">
                  <span
                    :style="{
                      width: (item.total_district_score / 200) * 100 + '%',
                    }"
                  ></span>
                </p>
                <span> {{ item.total_district_score }}分</span>
              </td>
              <td>{{ item.district_score1 }}</td>
              <td>{{ item.district_score2 }}</td>
              <td>{{ item.district_score3 }}</td>
              <td>{{ item.district_score4 }}</td>
              <td>{{ item.district_score5 }}</td>
              <td>{{ item.district_score6 }}</td>
              <td>{{ item.district_score7 }}</td>
              <td>{{ item.district_score8 }}</td>
            </tr>
          </table>
        </div>
      </el-tab-pane>
      <el-tab-pane label="市直有关单位排名" name="three">
        <div class="pane-body">
          <div class="title-box">
            <img src="~@img/project/icon-paiming.png" alt="" />
            <span>太原市市直有关单位绩效情况</span>
          </div>
          <div class="table-box-header">
            <table>
              <tr>
                <th width="120">排名</th>
                <th width="240">县（市、区、开发区）</th>
                <th width="320">总分</th>
                <th width="190" class="small">有效招商信息分</th>
                <th width="164" class="small">签约项目数分</th>
                <th width="164" class="small">开工项目数分</th>
                <th width="164" class="small">投产项目数分</th>
                <th class="small">附加分</th>
              </tr>
            </table>
          </div>
          <div class="table-box">
            <table>
              <tr v-for="(item, index) of tableData2" :key="item.id">
                <td width="120" class="bold">{{ index + 1 }}</td>
                <td width="240" class="bold">{{ item.unit_name }}</td>
                <td width="320" class="bold">
                  <p class="progress-f">
                    <span
                      :style="{
                        width: (item.total_unit_score / 200) * 100 + '%',
                      }"
                    >
                    </span>
                  </p>
                  <span> {{ item.total_unit_score }}分</span>
                </td>
                <td width="190">{{ item.unit_score1 }}</td>
                <td width="164">{{ item.unit_score2 }}</td>
                <td width="164">{{ item.unit_score3 }}</td>
                <td width="164">{{ item.unit_score4 }}</td>
                <td>{{ item.unit_score5 }}</td>
              </tr>
            </table>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="驻外办事机构排名" name="four">
        <div class="pane-body">
          <div class="title-box">
            <img src="~@img/project/icon-paiming.png" alt="" />
            <span>驻外办事机构排名</span>
          </div>
          <div class="chart-box" ref="chartBarZW"></div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="服务保障部门排名" name="five">
        <div class="pane-body">
          <div class="title-box">
            <img src="~@img/project/icon-paiming.png" alt="" />
            <span>服务保障部门排名</span>
          </div>
          <div class="chart-box" ref="chartBarService"></div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { ScoreRank } from "@api/project";
export default {
  data() {
    return {
      activeName: "one",
      zbBar: null,
      zwBar: null,
      serBar: null,
      tableData1: [
        {
          id: 1,
          name: "小店区",
          v1: "89",
          v2: "124",
          v3: "100",
          v4: "20",
          v5: "2",
          v6: "2",
          v7: "20",
          v8: "56",
          v9: "20",
          v10: "2w",
        },
        {
          id: 2,
          name: "迎泽区",
          v1: "89",
          v2: "124",
          v3: "100",
          v4: "20",
          v5: "2",
          v6: "2",
          v7: "20",
          v8: "56",
          v9: "20",
          v10: "2w",
        },
        {
          id: 3,
          name: "杏花岭区",
          v1: "89",
          v2: "124",
          v3: "100",
          v4: "20",
          v5: "2",
          v6: "2",
          v7: "20",
          v8: "56",
          v9: "20",
          v10: "2w",
        },
        {
          id: 4,
          name: "万柏林区",
          v1: "89",
          v2: "124",
          v3: "100",
          v4: "20",
          v5: "2",
          v6: "2",
          v7: "20",
          v8: "56",
          v9: "20",
          v10: "2w",
        },
        {
          id: 5,
          name: "尖草坪区",
          v1: "89",
          v2: "124",
          v3: "100",
          v4: "20",
          v5: "2",
          v6: "2",
          v7: "20",
          v8: "56",
          v9: "20",
          v10: "2w",
        },
        {
          id: 6,
          name: "晋源区",
          v1: "89",
          v2: "124",
          v3: "100",
          v4: "20",
          v5: "2",
          v6: "2",
          v7: "20",
          v8: "56",
          v9: "20",
          v10: "2w",
        },
        {
          id: 7,
          name: "古交市",
          v1: "89",
          v2: "124",
          v3: "100",
          v4: "20",
          v5: "2",
          v6: "2",
          v7: "20",
          v8: "56",
          v9: "20",
          v10: "2w",
        },
        {
          id: 8,
          name: "清徐县",
          v1: "89",
          v2: "124",
          v3: "100",
          v4: "20",
          v5: "2",
          v6: "2",
          v7: "20",
          v8: "56",
          v9: "20",
          v10: "2w",
        },
        {
          id: 9,
          name: "阳曲县",
          v1: "89",
          v2: "124",
          v3: "100",
          v4: "20",
          v5: "2",
          v6: "2",
          v7: "20",
          v8: "56",
          v9: "20",
          v10: "2w",
        },
        {
          id: 10,
          name: "娄烦县",
          v1: "89",
          v2: "124",
          v3: "100",
          v4: "20",
          v5: "2",
          v6: "2",
          v7: "20",
          v8: "56",
          v9: "20",
          v10: "2w",
        },
        {
          id: 11,
          name: "中北高新区",
          v1: "89",
          v2: "124",
          v3: "100",
          v4: "20",
          v5: "2",
          v6: "2",
          v7: "20",
          v8: "56",
          v9: "20",
          v10: "2w",
        },
        {
          id: 12,
          name: "西山示范区",
          v1: "89",
          v2: "124",
          v3: "100",
          v4: "20",
          v5: "2",
          v6: "2",
          v7: "20",
          v8: "56",
          v9: "20",
          v10: "2w",
        },
        {
          id: 13,
          name: "清徐开发区",
          v1: "89",
          v2: "124",
          v3: "100",
          v4: "20",
          v5: "2",
          v6: "2",
          v7: "20",
          v8: "56",
          v9: "20",
          v10: "2w",
        },
        {
          id: 14,
          name: "阳曲示范区",
          v1: "89",
          v2: "124",
          v3: "100",
          v4: "20",
          v5: "2",
          v6: "2",
          v7: "20",
          v8: "56",
          v9: "20",
          v10: "2w",
        },
      ],
      tableData2: [
        {
          id: 1,
          name: "市外来投资局",
          v1: "88",
          v2: "100",
          v3: "20",
          v4: "12",
          v5: "2",
          v6: "2",
        },
        {
          id: 2,
          name: "市工信局",
          v1: "88",
          v2: "100",
          v3: "20",
          v4: "12",
          v5: "2",
          v6: "2",
        },
        {
          id: 3,
          name: "市国资委",
          v1: "88",
          v2: "100",
          v3: "20",
          v4: "12",
          v5: "2",
          v6: "2",
        },
        {
          id: 4,
          name: "市发展改革委",
          v1: "88",
          v2: "100",
          v3: "20",
          v4: "12",
          v5: "2",
          v6: "2",
        },
        {
          id: 5,
          name: "市规划和自然资源局",
          v1: "88",
          v2: "100",
          v3: "20",
          v4: "12",
          v5: "2",
          v6: "2",
        },
        {
          id: 6,
          name: "市商务局",
          v1: "88",
          v2: "100",
          v3: "20",
          v4: "12",
          v5: "2",
          v6: "2",
        },
        {
          id: 7,
          name: "市农业农村局",
          v1: "88",
          v2: "100",
          v3: "20",
          v4: "12",
          v5: "2",
          v6: "2",
        },
        {
          id: 8,
          name: "市文旅局",
          v1: "88",
          v2: "100",
          v3: "20",
          v4: "12",
          v5: "2",
          v6: "2",
        },
        {
          id: 9,
          name: "市科技局",
          v1: "88",
          v2: "100",
          v3: "20",
          v4: "12",
          v5: "2",
          v6: "2",
        },
        {
          id: 10,
          name: "市人防办",
          v1: "88",
          v2: "100",
          v3: "20",
          v4: "12",
          v5: "2",
          v6: "2",
        },
        {
          id: 11,
          name: "市能源局",
          v1: "88",
          v2: "100",
          v3: "20",
          v4: "12",
          v5: "2",
          v6: "2",
        },
        {
          id: 12,
          name: "市教育局",
          v1: "88",
          v2: "100",
          v3: "20",
          v4: "12",
          v5: "2",
          v6: "2",
        },
        {
          id: 13,
          name: "部门1",
          v1: "88",
          v2: "100",
          v3: "20",
          v4: "12",
          v5: "2",
          v6: "2",
        },
        {
          id: 14,
          name: "部门2",
          v1: "88",
          v2: "100",
          v3: "20",
          v4: "12",
          v5: "2",
          v6: "2",
        },
      ],
    };
  },
  mounted() {
    this.getScoreRank2();
    this.getScoreRank3();
    if (this.activeName == "one") {
      this.initBarByZB();
      this.getScoreRank1();
    }
    if (this.activeName == "four") {
      this.initBarByZW();
      this.getScoreRank4();
    }
    if (this.activeName == "five") {
      this.initBarByService();
      this.getScoreRank5();
    }
  },
  methods: {
    async getScoreRank1() {
      let res = await ScoreRank({ flag: 1 });
      console.log(res);
      if (res.code && res.code != 0) {
      } else {
        let data1 = [];
        let data2 = [];
        let data3 = [];
        let data4 = [];
        let data5 = [];
        let data6 = [];
        res.map((item) => {
          data1.push(item.class_name);
          data2.push(item.total_score);
          data3.push(item.class_score1);
          data4.push(item.class_score2);
          data5.push(item.class_score3);
          data6.push(item.class_score4);
        });
        let options = {
          dataZoom: [
            {
              end: data1.length > 5 ? (data1.length > 10 ? 25 : 50) : 100,
            },
          ],
          xAxis: {
            data: data1,
          },
          series: [
            {
              data: data2,
            },
            {
              data: data3,
            },
            {
              data: data4,
            },
            {
              data: data5,
            },
            {
              data: data6,
            },
          ],
        };
        this.zbBar.setOption(options);
      }
    },
    async getScoreRank2() {
      let res = await ScoreRank({ flag: 2 });
      if (res.code && res.code != 0) {
      } else {
        this.tableData1 = res;
      }
    },
    async getScoreRank3() {
      let res = await ScoreRank({ flag: 3 });
      if (res.code && res.code != 0) {
      } else {
        this.tableData2 = res;
      }
    },
    async getScoreRank4() {
      let res = await ScoreRank({ flag: 4 });
      console.log(res);
      if (res.code && res.code != 0) {
      } else {
        let data1 = [];
        let data2 = [];
        let data3 = [];
        let data4 = [];
        let data5 = [];
        res.map((item) => {
          data1.push(item.offices_name);
          data2.push(item.total_offices_score);
          data3.push(item.offices_score1);
          data4.push(item.offices_score2);
          data5.push(item.offices_score3);
        });

        let options = {
          xAxis: {
            data: data1,
          },
          series: [
            {
              data: data2,
            },
            {
              data: data3,
            },
            {
              data: data4,
            },
            {
              data: data5,
            },
          ],
        };
        this.zwBar.setOption(options);
      }
    },
    async getScoreRank5() {
      let res = await ScoreRank({ flag: 5 });
      console.log(res);
      if (res.code && res.code != 0) {
      } else {
        let data1 = [];
        let data2 = [];
        res.map((item, index) => {
          data1.push(item.department_name);
          if (index == 0) {
            data2.push({
              value: item.total_department_score,
              itemStyle: {
                color: new this.$echarts.graphic.LinearGradient(1, 1, 0, 0, [
                  { offset: 0, color: "#FD4467" },
                  { offset: 1, color: "#FF6890" },
                ]),
              },
            });
          } else if (index == 1) {
            data2.push({
              value: item.total_department_score,
              itemStyle: {
                color: new this.$echarts.graphic.LinearGradient(1, 1, 0, 0, [
                  { offset: 0, color: "#FF7C78" },
                  { offset: 1, color: "#FD9965" },
                ]),
              },
            });
          } else if (index == 1) {
            data2.push({
              value: item.total_department_score,
              itemStyle: {
                color: new this.$echarts.graphic.LinearGradient(1, 1, 0, 0, [
                  { offset: 0, color: "#18C5B9" },
                  { offset: 1, color: "#19D0B2" },
                ]),
              },
            });
          } else {
            data2.push({
              value: item.total_department_score,
              itemStyle: {
                color: "#4DA1FF",
              },
            });
          }
        });

        let options = {
          dataZoom: [
            {
              start: 0,
              end: data2.length > 8 ? 50 : 100,
            },
            {},
          ],
          tooltip: {
            show: "true",
          },
          xAxis: {
            data: data1,
          },
          series: [
            {
              data: data2,
            },
          ],
        };
        this.serBar.setOption(options);
      }
    },

    handleClick(val) {
      this.activeName = val.name;
      if (val.name == "one" && this.zbBar == null) {
        this.initBarByZB();
      }
      if (val.name == "four" && this.zwBar == null) {
        this.$nextTick(() => {
          this.initBarByZW();
          this.getScoreRank4();
        });
      }
      if (val.name == "five" && this.serBar == null) {
        this.$nextTick(() => {
          this.initBarByService();
          this.getScoreRank5();
        });
      }
    },
    initBarByZB() {
      this.zbBar = this.$echarts.init(this.$refs.chartBarZB);
      let option = {
        color: [
          // new this.$echarts.graphic.LinearGradient(1, 1, 0, 0, [
          //   { offset: 0, color: "#4DA1FF" },
          //   { offset: 1, color: "#ADD4FF" },
          // ]),
          // "rgba(0,0,0,0)",
          "#ff8a8a",
          "#fcd63d",
          "#6ce6df",
          "#75b1ff",
        ],
        grid: {
          top: 50,
          left: "4%",
          bottom: "15%",
          right: "4%",
        },
        dataZoom: [
          {
            start: 0,
            end: 25,
            bottom: "0%",
            textStyle: {
              color: "rgba(255, 255, 255, 1)",
            },
          },
          {
            type: "inside",
          },
        ],
        legend: {
          show: true,
          top: 10,
          right: 0,
          itemWidth: 14,
          itemHeight: 14,
          itemGap: 40,
          textStyle: {
            fontSize: 14,
            color: "#666",
          },
        },
        tooltip: {
          show: "true",
        },
        xAxis: {
          type: "category",

          axisLabel: {
            show: true,
            color: "#666",
            fontSize: 16,
            interval: 0,
          },
          axisLine: {
            lineStyle: {
              color: "#EEF3F8",
              width: 1,
            },
          },
          axisTick: {
            show: false,
          },
        },

        yAxis: {
          name: "(分)",
          nameTextStyle: {
            fontSize: 16,
            color: "#A9B0B9",
          },
          type: "value",
          axisLabel: {
            show: true,
            color: "#A9B0B9",
            fontSize: 16,
          },
          // interval: 100, //每次增加几个
          axisLine: {
            show: true,
            lineStyle: {
              color: "#EEF3F8",
              width: 1,
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              // 使用深浅的间隔色
              color: "#EEF3F8",
              width: 1,
            },
          },
        },
        series: [
          {
            name: "总分",
            type: "bar",
            barWidth: 50, //柱图宽度
            barGap: "-100%",
            label: {
              show: true, //显示数值
              position: "left",
              offset: [-10, -80],
              formatter: "{c}",
              textStyle: { color: "#333", fontWeight: "bold", fontSize: 18 }, //设置数值颜色
            },
          },
          {
            name: "基础分",
            type: "bar",
            stack: "项目专班",
            barWidth: 50, //柱图宽度
            label: {
              show: true,
              formatter: "{c}",
            },
          },
          {
            name: "数量分",
            type: "bar",
            stack: "项目专班",
            barWidth: 50, //柱图宽度
            label: {
              show: true,
              formatter: "{c}",
            },
          },
          {
            name: "推进扣减分",
            type: "bar",
            stack: "项目专班",
            barWidth: 50, //柱图宽度
            label: {
              show: true,
              formatter: "{c}",
            },
          },
          {
            name: "综合分",
            type: "bar",
            stack: "项目专班",
            barWidth: 50, //柱图宽度
            label: {
              show: true,
              formatter: "{c}",
            },
          },
        ],
      };
      this.zbBar.setOption(option);
    },
    initBarByZW() {
      this.zwBar = this.$echarts.init(this.$refs.chartBarZW);
      let option = {
        color: [
          new this.$echarts.graphic.LinearGradient(1, 1, 0, 0, [
            { offset: 0, color: "#4DA1FF" },
            { offset: 1, color: "#ADD4FF" },
          ]),
          "#ff8a8a",
          "#75b1ff",
          "#daa3ff",
        ],
        grid: {
          top: 50,
          left: "4%",
          bottom: "10%",
          right: "4%",
        },
        legend: {
          show: true,
          top: 10,
          right: 0,
          itemWidth: 14,
          itemHeight: 14,
          itemGap: 40,
          textStyle: {
            fontSize: 14,
            color: "#666",
          },
          data: [
            "总分",
            "引进项目数分",
            "建立渠道和搭建平台工作分值",
            "附加分",
          ],
        },
        tooltip: {
          show: "true",
        },
        xAxis: {
          type: "category",

          axisLabel: {
            show: true,
            color: "#666",
            fontSize: 16,
            interval: 0,
          },
          axisLine: {
            lineStyle: {
              color: "#EEF3F8",
              width: 1,
            },
          },
          axisTick: {
            show: false,
          },
          data: ["市政府驻北京联络处", "市政府驻上海联络处"],
        },
        yAxis: {
          name: "(分)",
          nameTextStyle: {
            fontSize: 16,
            color: "#A9B0B9",
          },
          type: "value",
          axisLabel: {
            show: true,
            color: "#A9B0B9",
            fontSize: 16,
          },
          // interval: 100, //每次增加几个
          axisLine: {
            show: true,
            lineStyle: {
              color: "#EEF3F8",
              width: 1,
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              // 使用深浅的间隔色
              color: "#EEF3F8",
              width: 1,
            },
          },
        },
        series: [
          {
            name: "总分",
            type: "bar",
            barWidth: 50, //柱图宽度
            barGap: "-100%",
            label: {
              show: true, //显示数值
              position: "top", //  位置设为top
              formatter: "{c}",
              textStyle: { color: "#333", fontWeight: "bold", fontSize: 18 }, //设置数值颜色
            },
          },
          {
            name: "引进项目数分",
            type: "bar",
            stack: "项目专班",
            barWidth: 50, //柱图宽度
            label: {
              show: true,
              formatter: "{c}",
            },
          },
          {
            name: "建立渠道和搭建平台工作分值",
            type: "bar",
            stack: "项目专班",
            barWidth: 50, //柱图宽度
            label: {
              show: true,
              formatter: "{c}",
            },
          },
          {
            name: "附加分",
            type: "bar",
            stack: "项目专班",
            barWidth: 50, //柱图宽度
            label: {
              show: true,
              formatter: "{c}",
            },
          },
        ],
      };
      this.zwBar.setOption(option);
    },
    initBarByService() {
      this.serBar = this.$echarts.init(this.$refs.chartBarService);
      let option = {
        color: [
          new this.$echarts.graphic.LinearGradient(1, 1, 0, 0, [
            { offset: 0, color: "#FD4467" },
            { offset: 1, color: "#FF6890" },
          ]),
          new this.$echarts.graphic.LinearGradient(1, 1, 0, 0, [
            { offset: 0, color: "#FF7C78" },
            { offset: 1, color: "#FD9965" },
          ]),
          new this.$echarts.graphic.LinearGradient(1, 1, 0, 0, [
            { offset: 0, color: "#18C5B9" },
            { offset: 1, color: "#19D0B2" },
          ]),
          "#4DA1FF",
          "#4DA1FF",
          "#4DA1FF",
          "#4DA1FF",
          "#4DA1FF",
          "#4DA1FF",
          "#4DA1FF",
          "#4DA1FF",
          "#4DA1FF",
        ],
        grid: {
          top: 50,
          left: "4%",
          bottom: "15%",
          right: "4%",
        },
        dataZoom: [
          {
            start: 0,
            end: 50,
            bottom: "0%",
            textStyle: {
              color: "rgba(255, 255, 255, 1)",
            },
          },
          {
            type: "inside",
          },
        ],
        tooltip: {
          show: "true",
        },
        xAxis: {
          type: "category",
          axisLabel: {
            show: true,
            color: "#666",
            fontSize: 16,
            interval: 0,
          },
          axisLine: {
            lineStyle: {
              color: "#EEF3F8",
              width: 1,
            },
          },
          axisTick: {
            show: false,
          },
          data: [
            "市外来投资局",
            "市行业主管部门",
            "市司法局",
            "市市场监管局",
            "市审批服务管理局",
            "市规划和自然资源局",
            "市住建局",
            "市城乡管理局",
          ],
        },
        yAxis: {
          name: "(分)",
          nameTextStyle: {
            fontSize: 16,
            color: "#A9B0B9",
          },
          type: "value",
          axisLabel: {
            show: true,
            color: "#A9B0B9",
            fontSize: 16,
          },
          // interval: 100, //每次增加几个
          axisLine: {
            show: true,
            lineStyle: {
              color: "#EEF3F8",
              width: 1,
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              // 使用深浅的间隔色
              color: "#EEF3F8",
              width: 1,
            },
          },
        },
        series: [
          {
            type: "bar",
            barWidth: 50, //柱图宽度
            itemStyle: {
              //柱形图圆角，初始化效果
              barBorderRadius: [10, 10, 0, 0],
            },
            label: {
              show: true, //显示数值
              position: "top", //  位置设为top
              formatter: "{c}",
              textStyle: { color: "#333", fontWeight: "bold", fontSize: 18 }, //设置数值颜色
            },
          },
        ],
      };
      this.serBar.setOption(option);
    },
  },
};
</script>
<style lang="less" scoped>
.m-box {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

// 选项卡样式修改
/deep/.el-tabs__item {
  padding: 0 35px;
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
  height: 60px;
  line-height: 60px;
}
/deep/.el-tabs__item.is-active {
  font-weight: bold;
  color: #446db3;
}

/deep/.el-tabs__active-bar {
  height: 4px;
  background: #446db3;
}
/deep/ .el-tabs__nav-wrap {
  box-shadow: 0px 2px 6px 0px rgba(4, 0, 0, 0.1);
}
/deep/ .el-tabs__nav-wrap::after {
  height: 0;
}
/deep/.el-tabs__header {
  margin: 0;
  background: #fff;
}
/deep/.el-tabs {
  height: 100%;
  .el-tabs__content {
    box-sizing: border-box;
    height: calc(100% - 60px);
    padding: 30px 30px 20px;
    overflow: unset;
  }
}
/deep/.el-tabs__nav-scroll {
  padding-left: 30px;
}
/deep/ .el-tab-pane {
  padding: 30px;
  background: #ffffff;
  box-shadow: 0px 0px 9px 0px rgba(189, 189, 189, 0.67);
  text-align: left;
}
/deep/ .el-tab-pane,
.pane-body {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  .chart-box {
    width: 100%;
    height: calc(100% - 27px);
  }
}
.title-box {
  cursor: default;
  img {
    vertical-align: middle;
    margin-right: 10px;
  }
  span {
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #333333;
    vertical-align: middle;
  }
}
table {
  width: 100%;
  text-align: center;
  tr {
    border-top: 4px solid #fff;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
    cursor: default;
    th {
      height: 40px;
      background: #f5f6f7;
      border-right: 4px solid #fff;
      &:last-of-type {
        border-right: 0;
      }
      &.small {
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333333;
        line-height: 16px;
      }
    }
    td {
      height: 40px;
      line-height: 36px;
      background: rgba(245, 246, 248, 0.6);
      font-family: Microsoft YaHei;
      font-size: 12px;
      &.bold {
        font-size: 14px;
        font-weight: bold;
        // color: #446db3;
      }
    }
    .progress-f {
      display: inline-block;
      width: 251px;
      height: 20px;
      background: #d9e8ff;
      border-radius: 10px;
      vertical-align: middle;
      span {
        display: block;
        width: 0;
        height: 100%;
        background: linear-gradient(90deg, #97c8ff 0%, #4ea1ff 100%);
        border-radius: 10px;
        transition: 0.8s;
      }
    }
    &:nth-of-type(odd) {
      background: #f5f6f7;
    }
  }
}
.table-box-header {
  margin-top: 16px;
  padding-right: 10px;
  overflow-y: scroll;
  scrollbar-color: #767ffe #e9f3ff; //滚动条轨道颜色   滚动条滑块的颜色
  scrollbar-width: 6px;
  scrollbar-width: thin; //thin模式下滚动条两端的三角按钮会消失
  &::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 10px;
  }
  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    background: linear-gradient(0deg, #767ffe, #79aefe);
  }
  &::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    background: #e9f3ff;
    border-radius: 10px;
  }
}
.table-box {
  height: 560px;
  overflow-y: auto;
  padding-right: 10px;
  scrollbar-color: #767ffe #e9f3ff; //滚动条轨道颜色   滚动条滑块的颜色
  scrollbar-width: 6px;
  scrollbar-width: thin; //thin模式下滚动条两端的三角按钮会消失
  &::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 10px;
  }
  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    background: linear-gradient(0deg, #767ffe, #79aefe);
  }
  &::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    background: #e9f3ff;
    border-radius: 10px;
  }
  table tr td {
    height: 44px;
    line-height: 44px;
  }
}
/*
  *常用电脑尺寸  1680 * 900
  *              1536 * 864
  *              1440 * 900
  *ipad pro      1366 * 1024
  *ipad mini     1024 * 768
  *ipad          1024 * 768
 */
/*分辨率低于1680，采用下面的样式*/
@media screen and (max-device-width: 1680px) {
  .table-box {
    height: 530px;
  }
}
/*分辨率低于1536，采用下面的样式*/
@media screen and (max-device-width: 1536px) {
  .el-tab-pane,
  .pane-body {
    overflow: auto;
    scrollbar-color: #767ffe #e9f3ff;
    scrollbar-width: 6px;
    scrollbar-width: thin;
    overflow-y: auto;
    &::-webkit-scrollbar {
      width: 10px;
      height: 10px;
    }
    &::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background: linear-gradient(0deg, #767ffe, #79aefe);
    }
    &::-webkit-scrollbar-track {
      background: #e9f3ff;
      border-radius: 10px;
    }
  }
  .table-box {
    height: 432px;
  }
}
/*分辨率低于1440，采用下面的样式*/
@media screen and (max-device-width: 1440px) {
  .el-tabs .el-tabs__content {
    width: 1400px;
    height: 880px;
    transform: scale(0.8);
    -moz-transform: scale(0.8);
    -webkit-transform: scale(0.8);
    -o-transform: scale(0.8);
    transform-origin: 0 0;
  }
  /deep/ .el-tabs__item {
    padding: 0 30px;
    font-size: 18px;
  }
  table tr .progress-f {
    width: 140px;
  }
}
/*分辨率低于1366，采用下面的样式*/
@media screen and (max-device-width: 1366px) {
  /deep/ .el-tabs__item {
    padding: 0px 15px;
    font-size: 16px;
  }
}
/*分辨率低于1180，采用下面的样式*/
@media screen and (max-device-width: 1180px) {
  .table-box {
    height: 382px;
  }
  /deep/ .el-tab-pane,
  /deep/ .pane-body {
    max-width: 850px;
    overflow-x: auto;
    overflow-y: auto;
  }
  .table1 {
    width: 1600px;
    text-align: center;
  }
}
/*分辨率低于1024，采用下面的样式*/
@media screen and (max-device-width: 1024px) {
  /deep/ .el-tabs__item {
    padding: 0px 12px;
    font-size: 14px;
  }
  /deep/ .el-tab-pane,
  /deep/ .pane-body {
    max-width: 694px;
  }
  table tr {
    font-size: 14px;
  }
  table tr td.bold {
    font-size: 12px;
    font-weight: bold;
  }
}
</style>
